<script setup lang="ts">
import { Check, Close } from "@element-plus/icons-vue";
import { reactive, watch } from "vue-demi";
import { createTrainingRoom } from "@/axios/api";

let getValue = async (key: string) => {
  switch (key) {
    case "confirmTheGameState":
      console.log((window as any).config.getConfig(key));
      return (await (window as any).config.getConfig(key)) === false
        ? false
        : true;
    case "giveALikeState":
      return (await (window as any).config.getConfig(key)) === false
        ? false
        : true;
  }
  return (await (window as any).config.getConfig(key)) === true ? true : false;
};

let bl = reactive({
  confirmTheGameState: false,
  giveALikeState: false,
  lookingForGameState: false,
  oneMoreGameState: false,
});

setTimeout(async () => {
  bl.confirmTheGameState = await getValue("confirmTheGameState");
  bl.giveALikeState = await getValue("giveALikeState");
  bl.lookingForGameState = await getValue("lookingForGameState");
  bl.oneMoreGameState = await getValue("oneMoreGameState");
}, 0);

let utils = async (val: string) => {
  watch(
    () => (bl as any)[val],
    (newValue, oldValue) => {
      (window as any).config.setConfig(val, newValue);
    }
  );
};

// 自动接受对局
utils("confirmTheGameState");

// // 随机队友点赞
utils("giveALikeState");

// // 自动寻找对局
utils("lookingForGameState");

// // 自动再来一局
utils("oneMoreGameState");

// 创建5v5训练营
let createRoom = () => {
  createTrainingRoom();
};
</script>
<template>
  <div class="content">
    <div>
      <div>
        <span>自动接受对局</span>
        <el-switch
          v-model="bl.confirmTheGameState"
          class="mt-2"
          style="margin-left: 20px"
          inline-prompt
          :active-icon="Check"
          :inactive-icon="Close"
        />
      </div>

      <div>
        <span>随机队友点赞</span>
        <el-switch
          v-model="bl.giveALikeState"
          class="mt-2"
          style="margin-left: 20px"
          inline-prompt
          :active-icon="Check"
          :inactive-icon="Close"
        />
      </div>

      <div>
        <span>自动寻找对局</span>
        <el-switch
          v-model="bl.lookingForGameState"
          class="mt-2"
          style="margin-left: 20px"
          inline-prompt
          :active-icon="Check"
          :inactive-icon="Close"
        />
      </div>
      <div>
        <span>自动再来一局</span>
        <el-switch
          v-model="bl.oneMoreGameState"
          class="mt-2"
          style="margin-left: 20px"
          inline-prompt
          :active-icon="Check"
          :inactive-icon="Close"
        />
      </div>
    </div>
    <div>
      <el-button type="danger" plain @click="createRoom"
        >创建5V5训练营</el-button
      >
    </div>
  </div>
</template>
<style lang="less" scoped>
.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
</style>
